<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顺序淡出图片显示</title>
<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('div#content span').hide();   //隐藏所有的图片
		function outer(){             //定义一个函数，它返回一个闭包函数
			var a = 0;                 //定义下标变量
			function inner(){         //定义一个内部函数，它会依次淡出图片 			   
				if(a===$('div#content span').length){
					return;            //如果图片显示完成，则返回
					}
				//依次淡出显示图片
				$('div#content span').eq(a).fadeIn(1000,function(){fader();});
				a++;				   //将计数器加1	
			}
		return inner;                 //返回内部函数
		}
		var fader = outer();          //将函数结果赋给fader变量
		fader();	                   //执行内部函数
	});
</script>
<style>
 /*指定图片span容器的样式*/
 #content span {
    width: 200px;         /*宽度*/
	height:200px;         /*高度*/
	display:block;        /*块状显示*/
	float: left;          /*向左浮动*/
	overflow:hidden;      /*溢出隐藏*/
 }
</style>
</head>

<body>
<!--图片显示的容器-->
<div id="content">
 <!--定义各种不同的要显示的图片-->
 <span><img src="images/sample1.jpg" alt="喜鹊报喜" /></span>
 <span><img src="images/sample2.jpg" alt="姹紫嫣红" /></span>
 <span><img src="images/sample3.jpg" alt="水墨风情" /></span>
 <span><img src="images/sample5.jpg" alt="含苞盛放" /></span>
</div> 
</body>
</html>
